<!--多选 -->
<template>
  <div class="multiple-box" id="multiple-box" :style="getStyle"></div>
</template>

<script >
import { mapState } from "vuex"
import { ergodicList, getComponentListByKeys, getOffsetByCanvas, setSelectedComponent, $ } from "../../../lib/utils"
import { getDivIsIntersection } from "../../../lib/geometric"

let style = {}
export default {
  data() {
    return {
      list: [
        {
          class: "row",
          name: "top",
        },
        {
          class: "column",
          name: "left"
        }
      ],

    }
  },
  props: {
    multipleStartPosition: {
      type: Object,
      default: () => {}
    },
    multipleEndPosition: {
      type: Object,
      default: () => {}
    },
    isShow: {
      type: Boolean,
      default: false
    },
    scrollOffset: {
      type: Object,
      default: () => {}
    }

  },
  components: {

  },
  computed: {
    ...mapState('lowCode', {
      selectedComponent: state => state.selectedComponent,
      multipleKeys: state => state.multipleKeys,
      canvasComponentList: state => state.canvasComponentList
    }),
    getStyle(){
      const {
        clientX,
        clientY,
        offsetX,
        offsetY
      } = this.multipleStartPosition
      const {
        clientX: newClientX,
        clientY: newClientY,
        offsetX: newOffsetX,
        offsetY: newOffsetY
      } = this.multipleEndPosition
      if (!this.multipleStartPosition.clientX || !this.multipleEndPosition.clientX){
        style = {}
        return {}
      }

      const scrollEvent = ({width, height, left, top}) => {
        // 处理框选状态下, 鼠标滚轮触发滚动事件时, 对多选框几何属性的偏移修复
        // x方向滚动量
        const scrollOffsetLeft = this.scrollOffset.x - this.scrollOffset.scrollLeft
        // y方向滚动量
        const scrollOffsetTop = this.scrollOffset.y - this.scrollOffset.scrollTop
        // 新宽度
        const scrollOffsetX = width + scrollOffsetLeft
        // 新高度
        const scrollOffsetY = height + scrollOffsetTop
        width = Math.abs(scrollOffsetX)
        height = Math.abs(scrollOffsetY)
        // 如果新宽度小于0
        if (scrollOffsetX < 0){
          // 则left和width都会变化
          left = left + scrollOffsetX
        }
        if (scrollOffsetY < 0){
          top = top + scrollOffsetY
        }
      }
      const leftOffset = newClientX - clientX
      const topOffset = newClientY - clientY
      // 计算位置与大小
      let width = Math.abs(leftOffset)
      let height = Math.abs(topOffset)
      console.log(topOffset)
      let left, top
      if (leftOffset > 0){
        left = offsetX

        const scrollOffsetLeft = this.scrollOffset.x - this.scrollOffset.scrollLeft
        // 新宽度
        const scrollOffsetX = width + scrollOffsetLeft
        width = Math.abs(scrollOffsetX)
        // 如果新宽度小于0
        if (scrollOffsetX < 0){
          // 则left和width都会变化
          left = left + scrollOffsetX
        }
      }
      else {
        left = offsetX + leftOffset
      }
      if (topOffset > 0){
        top = offsetY

        // y方向滚动量
        const scrollOffsetTop = this.scrollOffset.y - this.scrollOffset.scrollTop
        // 新高度
        const scrollOffsetY = height + scrollOffsetTop
        height = Math.abs(scrollOffsetY)
        if (scrollOffsetY < 0){
          top = top + scrollOffsetY
        }
      }
      else {
        top = offsetY + topOffset

        // y方向滚动量
        const scrollOffsetTop = this.scrollOffset.y - this.scrollOffset.scrollTop
        // 新高度
        const scrollOffsetY = height + scrollOffsetTop
        height = Math.abs(scrollOffsetY)
        if (scrollOffsetY < 0){
          top = top + scrollOffsetY
        }
      }
      // const {
      //   width: scrollWidth,
      //   height: scrollHeight,
      //   left: scrollLeft,
      //   top: scrollTop
      // } = scrollEvent({width, height, left, top})
      // width = scrollWidth
      // height = scrollHeight
      // left = scrollLeft
      // top = scrollTop

      style = {
        width,
        height,
        left,
        top
      }
      return {
        zIndex: this.isShow ? 9 : -9,
        width: width + 'px',
        height: height + 'px',
        top: top + 'px',
        left: left + 'px',
      }
    },
  },
  methods: {
    setSelectComponents(){
      const {
        canvasComponentList,
      } = this
      // console.log(style)
      const filterList = []
      ergodicList(canvasComponentList, element => {
        const {
          width, height
        } = element.style
        if (this.getMouseIsStayWrap({
          width, height, key: element.key
        }, style)){
          filterList.push(element)
        }
      }, true)
      const multipleKeys = filterList.map(item => item.key)

      // 如果当前选中组件数量大于0, 即只有取消组件选中, clipboardStartPositionOffset不会清空
      if (filterList.length > 0){
        this.setClipboardStartPositionOffset(filterList)
      }


      if (multipleKeys.length === 1){
        setSelectedComponent(1, {
          data: filterList[0]
        })
      }
      else {
        setSelectedComponent()
        this.$store.commit("lowCode/setMultipleKeys", multipleKeys)
      }
    },
    /**
     * 判断组件在不在鼠标框选范围内
     * @param {*} wrap
     * @returns
     */
    getMouseIsStayWrap(wrap){
      const div1 = {
        key: "multiple-box",
        width: style.width,
        height: style.height
      }
      return getDivIsIntersection(div1, wrap)
    },
    /**
     * 设置clipboardStartPositionOffset
     * @param {*} wrap
     */
    setClipboardStartPositionOffset(componentList){
      const clipboardStartPositionOffset = []
      componentList.forEach(element => {
        const {
          offsetLeft,
          offsetTop
        } = getOffsetByCanvas($(`#${element.key}`))
        const {
          left,
          top
        } = style
        clipboardStartPositionOffset.push({
          offsetLeft: offsetLeft - left,
          offsetTop: offsetTop - top
        })
      })
      this.$store.commit("lowCode/setClipboardStartPositionOffset", clipboardStartPositionOffset)
    }


  }

}

</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>

